﻿/* cooperate with sizing.js */

.w-sm {
    width: 576px
}

.w-md {
    width: 768px
}

.w-lg {
    width: 992px
}

.w-xl {
    width: 1200px
}

.w-xxl {
    width: 1400px
}

.min-w-sm {
    min-width: 576px
}

.min-w-md {
    min-width: 768px
}

.min-w-lg {
    min-width: 992px
}

.min-w-xl {
    min-width: 1200px
}

.min-w-xxl {
    min-width: 1400px
}


.sizing-fill-remaining-h {
    height: 1px
}

.sizing-fill-remaining-mh {
    height: 1px
}

.mh-0 {
    max-height: 0px
}

:root {
    --app-gap-width: 992px;
}

@media (max-width: 992px) {
    .w-plain-100 {
        width: 100%;
    }
    /*'auto' has to be declare in the conditional area to avoid conflict with other limitation. since auto is compute during runtime. the compiler's behavior can not be sured.*/
    .h-plain-auto {
        height: auto;
    }

    .h-plain-100 {
        height: 100%;
    }

    .h-plain-90 {
        height: 90%;
    }

    .h-plain-80 {
        height: 80%;
    }

    .h-plain-70 {
        height: 70%;
    }

    .h-plain-60 {
        height: 60%;
    }

    .h-plain-50 {
        height: 50%;
    }

    .h-plain-40 {
        height: 40%;
    }

    .h-plain-30 {
        height: 30%;
    }

    .h-plain-20 {
        height: 20%;
    }

    .h-plain-10 {
        height: 10%;
    }

    .vh-plain-50 {
        height: 50vh;
    }

    .vh-plain-100 {
        height: 100vh;
    }
}

@media (not (max-width: 992px) ) {

    .sizing-fill-remaining-h-app {
        height: 1px
    }

    .w-app-70 {
        width: 70%;
    }

    .w-app-60 {
        width: 60%;
    }

    .w-app-50 {
        width: 50%;
    }

    .w-app-40 {
        width: 40%;
    }

    .w-app-30 {
        width: 30%;
    }

    .w-app-20 {
        width: 20%;
    }

    .h-app-100 {
        height: 100%;
    }

    .h-app-50 {
        height: 50%;
    }

    .h-app-40 {
        height: 40%;
    }

    .h-app-30 {
        height: 30%;
    }

    .h-app-20 {
        height: 20%;
    }

    .mh-app-100 {
        max-height: 100%;
    }
}
